<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/ico" href="/deng/images/logo/logo2.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线设计器2.0版本</title>
    <link rel="icon" type="image/ico" href="/deng/images/logo/logo2.png" />
    <!-- 基础插件样式开始 -->
    <!-- <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/metronic/css/styles.css" rel="stylesheet" type="text/css" /> -->
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/fontawesome5/css/fontawesome.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/flaticon/css/flaticon.css" rel="stylesheet" type="text/css" />
    <!-- <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/socicon/css/socicon.css" rel="stylesheet" type="text/css" /> -->
    <link href="/deng/source/plugins/newAdmin/vendors/v5.5.5/vendors/line-awesome/css/line-awesome.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/icons.css" rel="stylesheet" type="text/css" />
    <!-- <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/style.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="/deng/source/plugins/newAdmin/using/base/theme/bigleft/style.bundle.css" rel="stylesheet" type="text/css" /> -->
    <link href="/deng/source/bootstrap/css/style.bundle.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/datatables/1.10.15/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/vendors/base/datatables.bundle.css" rel="stylesheet" type="text/css" />
    <link href="/deng/source/plugins/newAdmin/bootstrap/datepick/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
     <!-- bootstrap验证框架开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/bootstrap-validate/bootstrapValidator.css" rel="stylesheet" type="text/css" />
    <!-- bootstrap验证框架结束 -->
    <!-- 笼罩插件开始 -->
    <link href="/deng/source/plugins/other/alertplug/alert/alert.css" type="text/css" rel="stylesheet"/>
    <!-- 笼罩插件结束 -->
    <!-- 右键插件开始-->
    <link href="/deng/source/css/bootcommon.min.css" rel="stylesheet" type="text/css" />
    <!-- 右键插件结束-->    
    <link rel="stylesheet" type="text/css" href="/deng/view/iot/graph-design/grapheditor/styles/grapheditor.css">
    <link rel="icon" type="image/ico" href="/deng/images/logo/logo2.png" />
    <link rel="stylesheet" href="/deng/source/plugins/other/bztree/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="/deng/view/iot/graph-design/grapheditor/styles/style.css">
    <!-- 提示插件开始 -->
    <link href="/deng/source/plugins/newAdmin/bootstrap/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <!-- 提示插件结束 -->
</head>
<body id="geEditor">
    <form id="BaseForm" method="post" style="display: none;">
        <div class="m-portlet__body">
            <div class="form-group m-form__group row">
                <div class="col-lg-6">
                    <input class="form-control" type="hidden" id="graph_site_id" name="graph_site_id">
                    <input class="form-control" type="hidden" id="stationId" name="stationId" >
                    <input class="form-control" type="hidden" id="graph_site_name" name="graph_site_name" >
                    <input class="form-control" type="hidden" id="graph_site_mxgraph" name="graph_site_mxgraph" >
                    <input class="form-control" type="hidden" id="imgxml" name="imgxml" >
                    <input class="form-control" type="hidden" id="w" name="w" >
                    <input class="form-control" type="hidden" id="h" name="h" >
                    <input class="form-control" type="hidden" id="gridBackGround" name="background">
                    <input class="form-control" type="hidden" id="gridColor" name="gridColor" >
                    <input class="form-control" type="hidden" id="gridSize" name="gridSize" >
                    <input class="form-control" type="hidden" id="showGrid" name="showGrid">
                </div>
            </div>
        </div>
    </form>

    <!-- 设备选择器模态框（Modal）开始 -->
    <div class="modal fade" id="pixelSelectModal" tabindex="-1" role="dialog" aria-labelledby="pixelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" id="pixelModalDialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="pixelModalLabel">
                        绑定设备
                    </h4>
                </div>
                <div class="modal-body" id="processBody" style="overflow:auto;">
                    <div class="m-portlet">
                        <!--begin::Form-->
                        <form class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed"  method= "post" id="searchPixelForm">
                            <div class="m-portlet__body">
                                <div class="form-group m-form__group row">
                                    <label class="col-form-label">位置:</label>
                                    <div class="col-lg-3">
                                        <select class="form-control" id="device_location_id" name="device_location_id">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                    <label class="col-form-label">类型:</label>
                                    <div class="col-lg-2">
                                        <select class="form-control" id="device_type_id" name="device_type_id">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                    <label class="col-form-label">设备名称:</label>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" name="name" placeholder="请输入">
                                    </div>
                                    <a href="javascript:search('pixelDataTables')" class="btn btn-light-primary font-weight-bold mr-2m-btn--custom m-btn--icon">
                                        <span><i class="fa fa-search"></i><span>检 索</span></span>
                                    </a>
                                </div>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <table id="pixelDataTables" class="table table-bordered table-striped table-hover" style="white-space: nowrap;">
                        <thead>
                        <tr>
                            <th>操作</th>
                            <th>类型</th>
                            <th>设备编码</th>
                            <th>名称</th>
                            <th>位置</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-success btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">取 消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 设备选择器模态框（Modal）结束 -->
    <div style="display:none;">
        <svg class='svgtemplate' id="svgtemplate" xmlns='http://www.w3.org/2000/svg' version='1.1' ><path id="svgtemplatePath" d='' stroke='#fff' stroke-width='2' fill='#fff'/></svg>
    </div>

    <!-- upload模态框（Modal）开始 -->
    <div class="modal fade" id="jehcImportModal" tabindex="-1" role="dialog" aria-labelledby="jehcImportModalLabel" data-backdrop="static"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="jehcImportModalLabel">

                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="jehcImportForm" method="post" enctype="multipart/form-data">
                        <input id="graphXml" name="graphXml" type="file" multiple = "false"  data-min-file-count="1" data-max-file-count="1" data-show-upload="true" data-show-preview="false"> <br>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-dismiss="modal">关闭</button>
                </div>
                <!--<div class="modal-footer"></div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- upload模态框（Modal）结束 -->

    <!-- upload模态框（Modal）开始 -->
    <div class="modal fade" id="jehcLcModal" tabindex="-1" role="dialog" aria-labelledby="jehcLcModalLabel" data-backdrop="static"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="jehcLcModalLabel">
                        设置项
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="jehcLcForm" method="post">

                    </form>
                </div>
                <!--<div class="modal-footer"></div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- upload模态框（Modal）结束 -->
    <input id='isSZ' type='hidden' value='0'>
</body>

<script src="/deng/source/plugins/newAdmin/vendors/base/jquery.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/js/popper.min.js"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/datatables/1.10.15/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/datatables/1.10.15/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/datepick/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/datepick/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script src="/deng/source/plugins/other/alertplug/alert/alert.js" type="text/javascript" ></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/bootbox.js" type="text/javascript"></script>
<script src="/deng/source/plugins/newAdmin/bootstrap/bootstrap-validate/bootstrapValidator.js" type="text/javascript"></script>
<script src="/deng/source/js/base.js" type="text/javascript" ></script>
<script src="/deng/source/js/boot.min.js" type="text/javascript" ></script>
<script src="/deng/source/plugins/newAdmin/using/base/theme/bigleft/scripts.bundle.js" type="text/javascript"></script>
<script src="/deng/source/plugins/jquery.serializejson.min.js" type="text/javascript"></script>

<div id="jehcCoverModal" class="jehcCover"></div>
<script type="text/javascript">
    mxBasePath = "/deng/view/iot/graph-design/src";
    STYLE_PATH = "/deng/view/iot/graph-design/grapheditor/styles";
    RESOURCES_PATH = "/deng/view/iot/graph-design/grapheditor/resources";
    MXSOURCESPATH = "/deng/view/iot/graph-design/grapheditor";
    IMAGE_PATH = "/deng/view/iot/graph-design/grapheditor/images";
    var NOED_IMAGE_PATH ="/deng/view/iot/graph-design/grapheditor/images/activities/48";
    var NODE_IMAGE_TOOL_PATH = "/deng/view/iot/graph-design/grapheditor/images/tools";

    var dialogWating_ = showWating({msg:'正在拼命的加载中...'});
    window.onload = function () {
        closeWating(null,dialogWating_);
    }
</script>
<link href="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css"/>
<script src="/deng/source/plugins/newAdmin/bootstrap/4.0.0/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Init.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/jscolor/jscolor.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/src/js/mxClient.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/EditorUi.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Editor.js"></script>

<!-- 自定义基础 -->
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/all.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/cellsButton.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/cellStyle.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/dragAndDrop.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/nodeAttribute.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/custom/validate.js"></script>

<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Sidebar.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Graph.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Shapes.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Actions.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Menus.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Format.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Toolbar.js"></script>
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/Dialogs.js"></script>

<!-- 表单属性配置 -->
<script type="text/javascript" src="/deng/view/iot/graph-design/grapheditor/js/node_common/form_info.js"></script>
<script type="text/javascript" src="/deng/source/plugins/other/bztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/deng/source/plugins/other/bztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/deng/source/plugins/other/bztree/js/jquery.ztree.exedit.js"></script>
<link href="/deng/source/plugins/other/jstree/dist/themes/default/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/deng/source/plugins/other/jstree/dist/jstree.js"></script>
<script type="text/javascript">
    var urlParams = (function(url)
    {
        var result = new Object();
        var idx = url.lastIndexOf('?');

        if (idx > 0)
        {
            var params = url.substring(idx + 1).split('&');

            for (var i = 0; i < params.length; i++)
            {
                idx = params[i].indexOf('=');

                if (idx > 0)
                {
                    result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
                }
            }
        }

        return result;
    })(window.location.href);

    // Default resources are included in grapheditor resources
    mxLoadResources = false;


    // Extends EditorUi to update I/O action states based on availability of backend
    (function()
    {
        var editorUiInit = EditorUi.prototype.init;

        EditorUi.prototype.init = function()
        {
            editorUiInit.apply(this, arguments);
            this.actions.get('export').setEnabled(false);

            // Updates action states which require a backend
            if (!Editor.useLocalStorage)
            {
                // mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
                // {
                //     var enabled = req.getStatus() != 404;
                //     this.actions.get('open').setEnabled(false);
                //     this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
                //     this.actions.get('save').setEnabled(enabled);
                //     this.actions.get('saveAs').setEnabled(enabled);
                //     this.actions.get('export').setEnabled(enabled);
                // }));
            }
        };

        // Adds required resources (disables loading of fallback properties, this can only
        // be used if we know that all keys are defined in the language specific file)
        mxResources.loadDefaultBundle = false;
        var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
            mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

        // Fixes possible asynchronous requests
        mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
        {
            // Adds bundle text to resources
            mxResources.parse(xhr[0].getText());

            // Configures the default graph theme
            var themes = new Object();
            themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

            // Main
            new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
        }, function()
        {
            document.body.innerHTML = '<center style="margin-top:10%;">加载资源文件时出错。请检查浏览器控制台。</center>';
        });
    })();

    //用于生成uuid
    function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    function guid() {
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    }
</script>

</html>
<style>
    .toast.toast-error {
        background-color: #fef0f0 !important;
        color: #f56c6c !important;
    }
    #toast-container>.toast-error {
        background-image: url() !important;
    }
    .toast.toast-success {
        background-color: #f0f9eb !important;
        color: #67c23a !important;
    }
    #toast-container>.toast-success {
        background-image: url() !important;
    }

    .toast.toast-warning {
        background-color: #fdf6ec !important;
        color: #e6a23c !important;
    }
    #toast-container>.toast-warning {
        background-image: url() !important;
    }
    .toast.toast-info {
        background-color:  #edf2fc !important;
        color: #909399 !important;
    }
    #toast-container>.toast-info {
        background-image: url() !important;
    }
   
</style>